<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#box{
				width:100px;
				height:100px;
				background: red;
				color:#fff;
				text-align: center;
				line-height: 100px;
			}
		</style>
	</head>
	<body>
		<button>变宽</button>
		<button>变高</button>
		<button>变色</button>
		<button>隐藏</button>
		<button>还原</button>
		<div id="box">一个小盒子</div>
	</body>
	<script>
		var box = document.getElementById('box')
		var but = document.getElementsByTagName('button')
		for(let i=0; i<but.length; i++){
			but[i].onclick=function(){
				if(i==0){
					console.log('这是第一个')
					box.style.width="500px"
				}else if(i==1){
					console.log("这是第二个")
					box.style.height="500px"
				}else if(i==2){
					console.log("这是第三个")
					box.style.background="purple"
				}else if(i==3){
					console.log("这是第四个")
					box.style.background="#fff"
				}else if(i==4){
					console.log("这是第五个")
					box.style.width="100px"
					box.style.height="100px"
					box.style.background="red"
				}
			}
		}
	</script>
</html>
